import { Input, View } from "@tarojs/components";
import styles from "./index.module.scss";
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";

interface ValidateCodeProps {
  seconds: number;
  mobile: {
    phone: string;
    code: string;
  };
}

const ValidateCode = (props: ValidateCodeProps) => {
  const { seconds, mobile } = props;
  const [code, setCode] = useState<string[]>([])
  const login = () => {
    Taro.navigateTo({
      url: "/welcome/pages/index",
    });
  };
  const change = (value: string, index: number) => {
    const newCode = [...code];
    newCode[index] = value;
    setCode(newCode); 
  };

  useEffect(() => {

    if(code.length === 4){
        login();
    }
  }, [code])


  return (
    <View className={styles["validate-code-container"]}>
      <View>
        <View className={styles["code-title"]}>输入4位验证码</View>
        <View className={styles["mobile-text"]}>
          您的验证码已发送到 {mobile.code} {mobile.phone}
        </View>
      </View>
      <View className={styles["code-container"]}>
        {/* @ts-ignore */}
        <Input placeholder="" focus={code.length === 0} className={styles["input-code"]} value={code[0]} onInput={(e) => change(e.target.value, 0)}/>
        {/* @ts-ignore */}
        <Input placeholder="" focus={code.length === 1} className={styles["input-code"]} value={code[1]} onInput={(e) => change(e.target.value, 1)}/>
        {/* @ts-ignore */}
        <Input placeholder="" focus={code.length === 2} className={styles["input-code"]} value={code[2]} onInput={(e) => change(e.target.value, 2)}/>
        {/* @ts-ignore */}
        <Input placeholder="" focus={code.length === 3} className={styles["input-code"]} value={code[3]} onInput={(e) => change(e.target.value, 3)}/>
      </View>
      <View>
        <View className={styles["code-text"]}>{seconds}s 后重新发送</View>
        {/* <AtButton disabled className={styles["login-btn"]} onClick={login}>
          确定
        </AtButton> */}
      </View>
    </View>
  );
};

export default ValidateCode;
